

import { Text, View, StyleSheet, SafeAreaView, Image, Dimensions } from 'react-native';
import Octicons from '@expo/vector-icons/Octicons';
import Ionicons from '@expo/vector-icons/Ionicons';
import SimpleLineIcons from '@expo/vector-icons/SimpleLineIcons';
// import ListItems from '@/components/ListTimes';




export default function Shou() {
    let ye = 0.00



    let jilu = false

    let zjjy = [
        {
            name: '杨海瑞',
            money: '500',
            date: '2023-01-01',
            time: '12:00'
        },
        {
            name: '杨艳超',
            money: '500',
            date: '2023-01-01',
            time: '12:00'
        },
        {
            name: '杨明',
            money: '500',
            date: '2023-01-01',
            time: '12:00'
        },
        {
            name: '杨牢明',
            money: '500',
            date: '2023-01-01',
            time: '12:00'
        }

    ]

    const { width, height } = Dimensions.get('window')
    const widthPx = 390;
    const heightPx = 844;
    const w = (value: number) => {
        return (value * width) / widthPx
    }
    const h = (value: number) => {
        return (value * height) / heightPx
    }
    const styles = StyleSheet.create({
        topStyle: {
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',

        },
        topStyle1: {
            margin: 21,
            backgroundColor: 'rgb(59,130,246)',
            width: 38,
            height: 38,
            borderRadius: 15,
            padding: 10,
        },
        topStyle2: {
            margin: 21,
            backgroundColor: 'rgb(239,246,255)',
            width: 38,
            height: 38,
            padding: 10,
        },
        yaoqing: {
            backgroundColor: 'rgba(239,246,255,1)',
            width: '90%',
            height: 100,
            borderRadius: '24px',
            marginLeft: 20,
            fontWeight: 'bold',
            fontSize: 18,
            padding: 20,
            boxSizing: 'border-box',

        },
        yaoqing1: {
            fontWeight: '100',
            fontSize: 12,
            lineHeight: 16,
        },
        plane: {
            width: 54,
            height: 54,
            backgroundColor: 'rgb(255,237,213)',
            display: 'flex',
            textAlign: 'center',
            padding: 15,
            left: 300,
            top: -50,
            boxSizing: 'border-box'
        },
        jiaoyi: {
            margin: 15,
            flex: 1,
        },
        jiaoyi1: {
            margin: 15,

        },

        topStyle1: {
            marginTop: 10,
            marginLeft: 20,
            fontWeight: 'bold',
            fontSize: 20
        }
    })
    return (
        <SafeAreaView style={styles.Qianb}>
            <Text style={styles.topStyle}>
                <Text style={styles.topStyle1}>
                    <Image style={{ width: w(15), height: h(15) }} source={require('../../assets/images/qb1.png')} />
                </Text>
                <Text style={{ width: w(68), height: h(22), fontSize: w(17), color: 'rgb(55,65,81,1)', fontFamily: 'PingFangSC-regular', fontWeight: 'bold' }}>口袋钱包</Text>

                <Text style={styles.topStyle2}>
                    <Ionicons name="notifications-outline" size={24} color="black" />
                </Text>
            </Text>

            <Text style={{ margin: 21, width: '90%' }}>
                <Text style={{ color: 'rgb(109,114,128)' }}>你的余额{'\n'}</Text>

                <Text style={{ margin: 21, width: '90%' }}>
                    <Text style={{ color: 'rgb(109,114,128)' }}>你的余额{'\n'}</Text>

                    <Text>￥{ye}{'\n'}</Text>
                    <Text style={{ color: 'rgba(75,85,99,1)' }}>你没有任何钱，请存入一些钱在钱包里</Text>
                    <Text style={styles.plane}>
                        <Octicons name="paper-airplane" size={20} color="black" />
                    </Text>
                </Text>

                <Text style={styles.yaoqing}>
                    邀请好友赚取佣金
                    <Text numberOfLines={0} style={styles.yaoqing1}>{'\n'}将【口袋钱包】推荐给你的好友，好友注册你将获得￥5奖励，快去邀请吧！</Text>

                    <Image style={{ left: 250, top: -30, width: 38, height: 38, display: 'flex' }} source={require('../../assets/images/3dian.png')} />

                    <Image style={{ left: w(250), top: h(-30), width: w(38), height: h(38), display: 'flex' }} source={require('../../assets/images/3dian.png')} />

                </Text>
                <Text style={styles.jiaoyi}>

                    <Text style={{ color: 'rgba(55,65,81,1)', fontSize: 17 }}>最近交易{'\n'}</Text>
                    <Text style={{ color: 'rgba(59,130,246,1)', fontSize: 13, left: 300, top: -20 }}>查看所有</Text>

                    <Text style={{ color: 'rgba(55,65,81,1)', fontSize: 17 }}>最近交易{'\n'}</Text>
                    <Text style={{ color: 'rgba(59,130,246,1)', fontSize: 13, left: w(300), top: h(-20) }}>查看所有</Text>

                </Text>


                <Text style={styles.jiaoyi1}>

                    {zjjy.map((item, index) => {
                        return <Text key={index}>
                            <Image style={{ width: 50, height: 50, borderRadius: '50%' }} source={require('../../assets/images/jiaoyitouxiang.jpg')} />
                            <View style={{ marginLeft: 50, }}>
                                <View>{item.name}</View>{'\n'}
                                <View>{item.date}</View>{'\n'}
                                <View>{item.time}</View>{'\n'}
                            </View>

                            <View style={{ color: 'red', marginLeft: 130, fontSize: 16 }}>-{'\n'}￥{item.money}</View>{'\n'}
                        </Text>
                    })}
                </Text>
                </Text>

                <View>
                    <Text>你的余额</Text>
                    <Text>￥{ye}</Text>
                    <Text>你没有任何钱，请存入一些钱在钱包里</Text>
                </View>
        </SafeAreaView >
    )
}


